import { Alert } from '@aws-amplify/ui-react';

<Alert
  variation="warning"
  isDismissible={false}
  hasIcon={true}
  heading=""
  >
  You must render the `<authenticator>` UI component before using the `useAuthenticator` composable. `useAuthenticator` was designed to retrieve `<authenticator>` UI specific state such as `route` and `user` and should not be used without the UI component.
</Alert>

## useAuthenticator

`@aws-amplify/ui-vue` ships with `useAuthenticator` Vue composable that can be used to access, modify, and update Authenticator's auth state. To use them, make sure the `<authenticator>` is present in the component or parent component:

```html
<script setup>
  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
  const auth = useAuthenticator();
</script>

<template>
  <authenticator></authenticator>
  <button @click="auth.signOut">Sign Out</button>
</template>
```

Note that the `auth` is an object wrapped with `reactive`, meaning there is no need to write `.value` after getters but, like `props` in `setup`, _we cannot destructure it:_

```html
<script setup>
  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
  const { signOut } = useAuthenticator();
  // ❌ This won't work because it breaks reactivity
  // it's the same as destructuring from `props`
</script>
```

In order to extract properties from the authenticator while keeping its reactivity, you need to use `toRefs`. It will create refs for any reactive property:

```html
<script setup>
  import { toRefs } from 'vue';
  import { Authenticator, useAuthenticator } from '@aws-amplify/ui-vue';
  // `route` `user` and `signOut` all are reactive.
  const { route, user, signOut } = toRefs(useAuthenticator());
</script>
```